<template>
  <div id="first">
         <!-- 头部标签 -->
 <header>
     <van-nav-bar
  title="新增拜访信息"
  left-arrow
  @click-left="onClickLeft"
  
  @click-right="onClickRight"
>
  <template #right>
    <van-icon name="wap-home-o" size="18" />
  </template></van-nav-bar>
 </header>
 <!-- 内容 -->
 <div class="cent">
    
   <ul>
     <li> <p>*客户名称</p><i><input v-model="inpValue" disabled  type="text" placeholder="下拉搜索 "></i><span @click="$router.push('/customer')"><img src="../../assets/客户关怀/新增客户拜访/切图/More.png" alt=""></span></li>
     <li> <p>*拜访标题</p><i><input type="text"></i><span><img src="../../assets/客户关怀/新增客户拜访/切图/More.png" alt=""></span></li>
     <li> <p>*拜访原因</p><i><input type="text" disabled v-model="reason"></i><span  id='reason' @click="showPopup"><img src="../../assets/客户关怀/新增客户拜访/切图/More.png" alt=""></span></li>
     <li> <p>*拜访时间</p><i><input type="text" disabled v-model="time1"></i><span  id='time' @click="showPopup1"><img src="../../assets/客户关怀/新增客户拜访/切图/More.png" alt=""></span></li>
      <li> <p>拜访地址</p><i><van-field v-model="value4"  type="textarea" rows="4" autosize placeholder="请输入" /></i></li>
      <li> <p>拜访情况</p><i><van-field v-model="value5"  type="textarea" rows="4" autosize placeholder="请输入" /></i></li>
       <li> <p>竞争信息收集情况</p><i><van-field v-model="value6"  type="textarea" rows="4" autosize placeholder="请输入" /></i></li>
   </ul>
 </div>
 <!-- 按钮 -->
  <div class="bottom">
   <van-button color="#003399" round @click="save" >保存</van-button>
 </div>
 <!-- 原因弹出层 -->
<van-popup v-model="show" position="bottom" :style="{ height: '30%' }" ><van-picker
  show-toolbar
  :columns="columns"
  @confirm="onConfirm"
  @cancel="onCancel"

/></van-popup>
<!-- 时间弹窗 -->
<van-popup v-model="show1" position="bottom" :style="{ height: '30%' }"  ><van-datetime-picker
  v-model="currentDate"
  type="date"
  :columns-order="['year','month', 'day', ]"
  :formatter="formatter"
   @confirm="onConfirm1"
  @cancel="onCancel1"
/></van-popup>
  </div>
</template>

<script>
import {addVisit} from '../../request/api'
export default {
data(){
  return{
    inpValue:'',
    id:'',
    value4:'',
    value5:'',
    value6:'',
      show: false, 
      show1: false,
      columns: ['例行走访', '售中支撑','售前支撑',],
      reason:'',
      time1:'',
       currentDate: new Date(),
  }
},
mounted(){
   this.inpValue=localStorage.getItem('searchVal')
    this.id=localStorage.getItem('searchId')
},
methods: {
    onClickLeft() {
      this.$router.push('/cust')
    },
    onClickRight(){
      this.$router.push('/login')
    },
    // 冒泡层
     showPopup() {
      this.show = true;
    },
     showPopup1() {
      this.show1 = true;
    },
     onConfirm(value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`);
      this.reason=value
      this.show = false;
    },
     onConfirm1(value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`);
      let year=value.getFullYear();
      let month=value.getMonth()+1
      month = month < 10 ? "0" + month : month;
      let day=value.getDate()
      day = day < 10 ? "0" + day : day;
      
      this.time1=`${year}/${month}/${day}`
      this.show1 = false;
    },
    onCancel() {
     this.show = false;
    },
     onCancel1() {
     this.show1 = false;
    },
      formatter(type, val) {
      if (type === 'year') {
        return val + '年';
      }
      if (type === 'month') {
        return val + '月';
      }
      if (type === 'day') {
        return val + '日';
      }
      return val;
    },
    save(){
      // addVisit({custId:this.id,custName:this.inpValue,visitTime:this.time1,visitAddress:"东圃大马路",visitTitle:"商务访谈",visitReason:this.reason,visitSituation:"拜访情况描述",collectSituation:"竞争信息收集情况-对手很弱",creatorUser:"1"}).then(res=>{
      //   console.log(res);
      // })
      addVisit({"custId":this.id,"custName":this.inpValue,"visitTime":"2020-08-08 16:50:10","visitAddress":"东圃大马路","visitTitle":"商务访谈","visitReason":"走访原因","visitSituation":"拜访情况描述","collectSituation":"竞争信息收集情况-对手很弱"}).then(res=>{
        console.log(res);
      })
      
  },
    }
}
</script>

<style lang='less'>
*{
    font-size: .18rem!important;
}
header{
    background: #003399;
    .van-nav-bar{background:#003399;
font-size: .2rem;
padding:3% 0 0;
.van-nav-bar__title,.van-nav-bar__text{
    color: white;
    font-size: .2rem;
}
.van-icon{
    font-size: .3rem;
    color: white;
}
     }
    
}
.cent{
  background: white;
  margin: 0 0 4% 0 ;
  ul{
      .van-icon{
          vertical-align: center;
      } 
    margin: 0  5%;
     li{
         
    line-height: .45rem;
    display: flex;
    p{
        width: 30%;
    }
    i{
          width: 65%;
    }
    input{
      border: none;
    }
  }
  }
 
}
.bottom{
  
  position: absolute;
  width: 100%;
  bottom: .1rem;
  .van-button{
  margin: .1rem .15rem;
  width: 92%;
}
}
</style>